<template>
  <div class="app_container">
    <!-- 顶部 -->
    <div class="top">
      <div class="logo_cat">
        <img v-for="(item, index) in catList" :key="index" 
          :src="item" 
          alt="logo" />
      </div>
      Uni商城后台数据管理
    </div>
    <!-- 导航和导航视图 -->
    <div class="nav_content">
      <!-- 左侧导航 -->
      <div class="left_nav">
        <el-menu default-active="/" class="el-menu-vertical-demo" router>
          <el-menu-item index="/user">
            <el-icon>
              <User />
            </el-icon>
            <span>用户信息</span>
          </el-menu-item>
          <el-menu-item index="/goods">
            <el-icon>
              <Goods />
            </el-icon>
            <span>商品管理</span>
          </el-menu-item>
          <el-menu-item index="/order">
            <el-icon>
              <Notebook />
            </el-icon>
            <span>订单列表</span>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 右侧路由视图 -->
      <div class="right_content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import axios from "../public/request";
import sourceAxios from "axios";
import { User, Goods, Notebook } from '@element-plus/icons-vue'

onMounted(() => {
  checkToken();
  getUploadSignatureParam();
})

// 猫meme吉祥物列表
let catList = [
  "https://uni-mall-maohe.oss-cn-guangzhou.aliyuncs.com/uni_mall/cat/dancing.gif",
  "https://uni-mall-maohe.oss-cn-guangzhou.aliyuncs.com/uni_mall/cat/dancing2.gif",
  "https://uni-mall-maohe.oss-cn-guangzhou.aliyuncs.com/uni_mall/cat/blow.gif",
  "https://uni-mall-maohe.oss-cn-guangzhou.aliyuncs.com/uni_mall/cat/delete_not.gif",
  "https://uni-mall-maohe.oss-cn-guangzhou.aliyuncs.com/uni_mall/cat/zfb_cat.gif",
];


// 检查token是有效性-登录有效性
function checkToken() {
  const token = localStorage.getItem('token');
  if (!token) {
    // 如果没有token，跳转到登录页面
    window.location.href = '/login/';
  } else {
    executeTokenCheck(token);
  }
}

// 执行token检查
async function executeTokenCheck(token) {
  let res = await axios.post("/common/checkToken", {
    token: token
  });

  if (res.data.code == 0) {
    // token无效，跳转到登录页面
    window.location.href = '/login/';
  }
}

// 获取上传到OSS的签名参数
async function getUploadSignatureParam() {
  let sigParam = await sourceAxios.get("http://localhost:9090/oss/getOssPolicy");

  console.log("-=-=", sigParam.data);


  // 将获取到的签名参数存储到localstorage中
  localStorage.setItem("signatureParam", JSON.stringify(sigParam.data));
}

</script>

<style scoped>
.top {
  height: 60px;
  background-color: #99c5e7;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 20px;
}

.left_nav {
  width: 13vw;
  min-width: max-content;
}

.nav_content {
  display: flex;
}

.right_content {
  box-sizing: border-box;
  /* border: solid red 1px; */
  width: 87vw;
  padding: 10px;
}

/* 添加防止文本选择的样式 */
.app_container {
  user-select: none;
}

.logo_cat{
  position: absolute;
  right: 20px;
}

.logo_cat img{
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
</style>
